<%--
  Created by IntelliJ IDEA.
  User: hz
  Date: 2024/7/20
  Time: 21:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui-v2.9.0/layui/css/layui.css" media="all">
    <script src="/layui-v2.9.0/layui/layui.js"></script>
</head>
<body>

<div style="width: 1400px">
    <!--    顶部导航栏-->
    <div class="layui-col-xs10 layui-col-xs-offset1">

        <ul class="layui-nav layui-bg-gray">
            <li class="layui-nav-item left-nav layui-col-xs2">
                <!-- 品牌logo位置 -->
                <div class="nav-profile">
                    <!-- 图像使用div包裹，设置相对定位 -->
                    <div class="nav-profile-img" style="margin-left: 20px;">
                        <img class="logo_img" src="/img/热趣部落.png" style="transform: scale(1.5);" alt="加载中"/>
                    </div>
                    <!-- 用户名链接 -->
                    <a href="#" style="color: black;">热趣部落</a>
                </div>
            </li>
            <li class="layui-nav-item layui-this layui-col-xs1"><a href="/forward/indexPage">首页</a></li>
            <li class="layui-nav-item layui-col-xs1"><a href="">热点</a></li>
            <li class="layui-nav-item layui-col-xs1">
                <a href="javascript:;">模块</a>
                <dl class="layui-nav-child">
                    <dd><a href="">趣点模块</a></dd>
                    <dd><a href="">动态模块</a></dd>
                    <dd><a href="">个人信息模块</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item "><a href="">关于</a></li>
            <!--            个人信息接口-->
            <li class="layui-nav-item layui-col-xs2" style="float: right">
                <div class="nav-profile">
                    <div class="nav-profile-img" style="margin-left: 20px;">
                        <img class="layui-nav-img" src="${sessionScope.user.upictureurl}" style="transform: scale(1.5);" alt="加载中"/>
                    </div>
                    <!-- 用户名链接 -->
                    <a href="javascript:;" style="color: black;">${sessionScope.user.uname}</a>
                    <dl class="layui-nav-child" style="text-align: center">
                        <dd><a href="">个人信息</a></dd>
                        <dd><a href="">我的好友</a></dd>
                        <dd >
                            <div >
                                <a href="/logout/user"> <i class="layui-icon layui-icon-logout"></i> 退出登录</a>
                            </div>
                        </dd>
                    </dl>
                </div>
            </li>
        </ul>
    </div>

    <!--    添加趣点界面表单-->
    <div class="layui-col-xs10 layui-col-xs-offset1 layui-bg-gray" style="margin-top: 30px">
        <h2 style="text-align: center; margin-top: 20px;margin-bottom: 10px">创建趣点</h2>
        <hr style="margin-bottom: 20px;border: 1px solid">
        <form class="layui-form layui-form-pane layui-col-xs8 layui-col-xs-offset2" >
            <!--            趣点名称-->
            <div class="layui-form-item">
                <label class="layui-form-label">趣点名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
                </div>
            </div>


            <!--            趣点描述-->

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">趣点描述</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" name="barText" class="layui-textarea"></textarea>
                </div>
            </div>

            <!--            趣点兴趣标签选择-->

            <div class="layui-form-item" id="ID-transfer-demo-showSearch" ></div>


            <div class="layui-form-item">
                <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
                <a href="javascript:void(0)" style="position: relative; top: 6px; left: -15px;" lay-on="test-iframe-curl">
                    <ins>趣点管理协议</ins>
                </a>
            </div>


            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="form-data" >确认</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>

</div>



<script>
    layui.use( function(){
        var form = layui.form;
        var layer = layui.layer;
        var transfer = layui.transfer;
        var $ = layui.$;
        var upload = layui.upload;
        var element = layui.element;
        var util = layui.util;
        // 提交事件
        form.on('submit(form-data)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            // 此处可执行 Ajax 等操作
            // …
            var t = transfer.getData('ID-transfer-demo');
            var dataToSend = {
                'title': field.title,
                'barText': field.barText,
                'transfers': t
            };
            t = JSON.stringify(dataToSend);
            $.ajax({
                url: '/barinterest/insertInfo',
                type:"post",
                data: t,
                headers : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
                success: function (res) {
                    layer.msg(res);
                },
                error: function (data) {
                    layer.msg('上传失败');
                }
            });
            return false; // 阻止默认 form 跳转
        });

        // 兴趣标签数据加载
        var data = [];
        $.ajax({
            url: '/interest/getAllInterestLabels',
            type:"post",
            dataType: 'json',
            success: function (res) {
                data = res;
                // 渲染
                transfer.render({
                    elem: '#ID-transfer-demo-showSearch',
                    id: 'ID-transfer-demo',
                    width: 300,
                    height: 300,
                    data: data,
                    title: ['未选——兴趣标签', '已选——兴趣标签'],
                    showSearch: true
                });
            },
            error: function (data) {
                layer.msg('兴趣标签加载失败');
            }
        })


        //     用户协议
        util.on('lay-on', {
            'test-iframe-curl': function () {
                layer.open({
                    type: 2,
                    title: '创建趣点协议',
                    shadeClose: true,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['800px', '500px'],
                    content: '/private/createBarAgreement'
                });
            }
        });

    });
</script>


</body>
</html>

<style>
    /* styles.css */
    .nav-profile {
        display: flex;
        align-items: center;
    }

    .nav-profile-img {
        position: relative;
        margin-right: 10px;
    }
    a{
        margin-left: 10px;
    }
    a:hover{
        text-decoration: underline;
    }

    hr{
        padding: 0;
        margin: 0;
    }
    .logo_img{
        width: 40px;
        height: 30px;
    }
</style>
